<?php echo $this->render('/public/header'); ?>

    <!-- 加载编辑器的容器 -->
    <div id="main" class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
        <div class="btn-group" role="group" aria-label="...">
            <button type="button" class="btn btn-default" onclick="menuClick(0)">查看当前邮件</button>
            <button type="button" class="btn btn-default" onclick="menuClick(1)">创建新邮件</button>
        </div>
        <div id="submenu" style="margin-top:20px">
            <div>
                <?php foreach ($list as $v): ?>
                    <div style="width:100%;height:50px">
                        <?php echo $v['name']; ?>&nbsp;&nbsp;&nbsp;<button class="btn btn-success" onclick="show(<?php echo $v['id'];?>)">编辑</button>
                    </div>
                <?php endforeach; ?>
                <script id="editContainer" name="content" type="text/plain" style="display: none"></script>
                <button class="btn btn-success" onclick="edit()">edit</button>
            </div>
            <div style="display:none">
                 <input type="text" id="name" placeholder="邮件名称" class="form-control" />
                        <br/>
                        <br/>
                <script id="container" name="content" type="text/plain">

                </script>
                <button onclick="upload()" class="btn btn-success" style="margin-top:20px">确认上传</button>
                <!-- 配置文件 -->
                <script type="text/javascript" src="/plugins/ueditor/ueditor.config.js"></script>
                <!-- 编辑器源码文件 -->
                <script type="text/javascript" src="/plugins/ueditor/ueditor.all.js"></script>
                <!-- 实例化编辑器 -->
                <script type="text/javascript">
                    var ue = UE.getEditor('container', {
                        autoHeightEnabled: true,

                        autoFloatEnabled: true,

                        initialFrameWidth: 690,

                        initialFrameHeight: 483,
                    });
                    var editUe = UE.getEditor('editContainer', {
                        autoHeightEnabled: true,

                        autoFloatEnabled: true,

                        initialFrameWidth: 690,

                        initialFrameHeight: 483,
                    });
                </script>
            </div>
        </div>


        <script>
            var Global = {};
            function edit() {
                const data = {};
                data.data = editUe.getContent();
                data.id = Global.num;
                $.post('/setting/mail-upload', data, function (res) {
                    layer.alert('更新成功');
                }, 'json')
            }
            function menuClick(v){
                $($("#submenu").children()[v]).show();
                $($("#submenu").children()[v]).siblings().hide();
            }
            function show(num) {
                Global.num = num;
                $("#editContainer").show();
                var list = <?php echo json_encode($list);?>;
                list.map(v=>{
                    if (parseInt(v.id,10)==num) {
                        editUe.setContent(v.detail);

                    }
                });

            }
            function upload() {
                const data = {};
                data.data = ue.getContent();
                data.name = $("#name").val();
                if (!data.name) {
                    layer.alert('未添加邮件名称');return false;
                }
                $.post('/setting/mail-upload', data, function (res) {
                    layer.alert('添加成功');
                }, 'json')
            }
        </script>
    </div>
<?php echo $this->render('/public/footer'); ?>